<template>
<div class="box">
    <div class="headerDiv">
        <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="(item,index) in pictureBj" :key="index">
                <img class="bjDiv" :src="item.imgSrc" />
            </el-carousel-item>
        </el-carousel>
    </div>
    <div class="contentDiv">
        <h1>通知公告：</h1>
        <table class="tableStyle" cellspacing="0" cellpadding="0">
            <tr class="table_tr" v-for="(item,index) in newsForms" :key="index" @click="selectNews(item.newsId)">
                <td class="table_td table_tdOne"><div class="table_tdOne_content">{{item.newsTitle}}</div></td>
                <td class="table_td table_tdTwo"><div class="table_tdTwo_content">{{item.newsTime}}</div></td>
                <td class="table_td table_tdTwo"><div class="table_tdTwo_content"><i class="el-icon-d-arrow-right"></i></div></td>
            </tr>
        </table>
    </div>
    
</div>
</template>

<script>
import { axiosRequest } from "@/utils/axiosRequest";
export default {
    data() {
        return {
            pictureBj: [
                {imgSrc: require("../../assets/img/homePage/S1.jpg")},
                {imgSrc: require("../../assets/img/homePage/S2.jpg")},
                {imgSrc: require("../../assets/img/homePage/S3.jpg")},
                {imgSrc: require("../../assets/img/homePage/S4.jpg")},
                {imgSrc: require("../../assets/img/homePage/S5.jpg")},
                {imgSrc: require("../../assets/img/homePage/S6.jpg")},
                ],
            newsForms: [],
        }
    },
    methods: {
        selectNews(id) {
            var self = this;
            self.$router.push({
                path: 'CheckNews',
                query: {id: id,}
                })
        },
    },

    mounted:function () {
        var self = this;

        // 请求所有通知信息
        axiosRequest("get", "/news/listAll",null).then((res) => {
            if (res.data.code === 200) {
                self.newsForms = res.data.data.reverse();
            } else {
                self.$message.error(res.data.data);
            }
        });
    },
}
</script>


<style lang="less" scoped>
.box{
    padding-left: 10px;
}

.box::-webkit-scrollbar {
    display: none;
}

.headerDiv {
    height: 220px;
}

.bjDiv {
    width: 100%;
    height: 100%;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

.contentDiv {
    margin-top: 10px;
}

.tableStyle {
    width: 100%;
    margin-top: 10px;
}

.table_tr:hover {
    cursor: pointer;
    background-color: #d5d6d8;
}

.table_td {
    border-bottom: 1px solid rgb(194, 193, 193);
}

.table_tdOne {
    width: 50%;
    padding: 15px;
}

.table_tdTwo {
    width: 25%;
}

.table_tdOne_content {
    width: 350px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.table_tdTwo_content {
    float: right;
    margin-right: 30px;
}

</style>